<template>
	<view>
		<touch-popup @close="close" ref="popup" background="transparent">
			<view class="tabbar">
				<view class="top-icon">
					<view class="icon-item">
						<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
					</view>
					<view class="icon-item"></view>
				</view>
				<view class="top-left">
					<view class="top-left-item" >
						<view style="padding-top: 15px;">签到中心</view>
						<view class="mybalance">
							<text>我的橡果</text>
							<text>{{user.amount}}</text>
						</view>
					</view>
				</view>
				<view class="top-right">
					<view class="top-right-item">
						<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/logo.png" mode="heightFix"></image>
						<view class="sign-hint">
							<view class="">
								记得签到！
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<scroll-view class="list" scroll-y>
				<!-- 签到 -->
				<view class="pd-15">
					<view class="bck-group">
						<view class="sign-title">
							<text>已连续签到{{signUser.continuity_days}}天</text>
							<text>再连续签到{{dayCount}}天，共获得{{dayAmount}}橡果</text>
						</view>
						<view class="sign-content">
							<view class="sign-item" v-for="(item,index) in signConfig" key="sign">
								<view class="sign-item-top">
									<view style="flex: 1;padding: 2px;">
										<view class="sign-item-icon" :class="{ 'sign-check': item.day <= signUser.continuity_days }">
											<view>
												<image style="width: 18px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/icon-松果.png" mode="widthFix"></image>
											</view>
											<view style="height: 12px;">
												<image v-if="item.day <= signUser.continuity_days" style="width: 12px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/signin-ok.png" mode="widthFix"></image>
												<text v-else style="font-size: 8px;">+{{item.number}}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="sign-item-bottom">
									<view class="" style="display: flex;width: 100%;">
										<view class="signline" :class="{ 'bck-black' : item.day > 1 && item.day <= signUser.continuity_days }"></view>
										<view class="signcircle" :class="{ 'bck-black': item.day <= signUser.continuity_days }"></view>
										<view class="signline":class="{ 'bck-black': item.day < signConfig.length && item.day <= signUser.continuity_days }"></view>
									</view>
									<view class="signtext">
										<text v-if="item.day <= signUser.continuity_days">{{signUser.is_sign && item.day === signUser.continuity_days ? '今日': ''}}已签</text>
										<text v-else>{{item.day}}天</text>
									</view>
								</view>
							</view>
						
						</view>
					
						<view class="sign-btn">
							<view class="sign-btn-item" @click="signDo">
								<text>{{signUser.is_sign ? '今日已签到' : '签到领取橡果'}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 活动 -->
				<view class="pd-15">
					<view class="bck-group">
						<view class="task-title">
							今日活动
						</view>
						<view class="task-content">
							<view class="task-item">
								<view class="task-item-left">
									<image style="width: 30px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/icon-星星.png" mode="widthFix"></image>
								</view>
								<view class="task-item-center">
									<view class="">
										橡果大转盘
									</view>
									<view>
										今日首次免费
									</view>
								</view>
								<view class="task-item-right">
									<view class="task-btn" @click="openLottery">
										<text>打开</text>
									</view>
								</view>
							</view>
							
							
						</view>
					</view>
				</view>
				
			</scroll-view>
			
		</touch-popup>
		<popup-lottery @close="lotteryClose" ref="pLottery"></popup-lottery>
	</view>
</template>

<script setup>
	const app = getApp()
	import { ref, defineExpose, getCurrentInstance, computed } from 'vue'
	import { onShow } from "@dcloudio/uni-app";
	import touchPopup from '@/components/touch-popup/touch-popup'
	const popup = ref() // ref组件
	const pLottery = ref()
	const {proxy} = getCurrentInstance()
	
	const signConfig = ref([]) // 签到公共信息
	const signUser = ref({}) // 用户的签到信息
	const user = ref({}) // 用户信息，展示橡果数量
	/* 计算属性 */
	const dayCount = computed(() => {
		return signConfig.value.length - signUser.value.continuity_days
	})
	const dayAmount = computed(() => {
		let amount = 0
		for (let i = signUser.value.continuity_days;i < signConfig.value.length;i++) {
			amount += signConfig.value[i].number
		}
		return amount
	})
	
	/* 方法 */
	const openLottery = () => {
		pLottery.value.open()
	}
	const signDo = () => {
		if (signUser.value.is_sign) {
			uni.showToast({
				title: '今日已签到～',
				icon: 'none'
			})
			return
		}
		// 签到
		uni.showLoading({
			title: '正在签到'
		})
		uni.request({
			url: app.globalData.requestUrl + '/api/user/sign',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			method: 'POST',
			success: (res) => {
				if (res.data.code === 200) {
					// 更改本地余额
					uni.request({
						url: app.globalData.requestUrl + '/api/user',
						header: {
							'Authorization': 'Bearer ' + app.globalData.token
						},
						success: (res) => {
							app.globalData.userinfo = res.data.data
							getUserSignInfo(false) // 再次请求用户签到信息
						},
						complete() {
							uni.hideLoading()
							uni.showToast({
								title: '签到成功',
								icon: 'success'
							})
						}
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}
		})
	}
	const open = () => {
		user.value = app.globalData.userinfo
		if (JSON.stringify(signUser.value) !== '{}'){
			popup.value.open()
			return
		}
		uni.showLoading()
		uni.request({
			url: app.globalData.requestUrl + '/api/sign/config',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success: (res) => {
				console.log(res.data)
				signConfig.value = res.data.data
				getUserSignInfo()
			},
			fail() {
				uni.showToast({
					title: '获取签到信息失败',
					icon: 'none'
				})
			},
			complete() {
				uni.hideLoading()
			}
		})
	}
	/**
	 * 请求用户签到信息
	 */
	const getUserSignInfo = (first = true) => {
		uni.request({
			url: app.globalData.requestUrl + '/api/user/sign/info',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success(res2) {
				console.log(res2.data)
				if (!res2.data.data.hasOwnProperty('continuity_days')) {
					res2.data.data.continuity_days = 0
					res2.data.data.is_sign = false
					res2.data.data.last_sign = '1970-01-01 03:00:00'
				}
				signUser.value = res2.data.data
			},
			complete() {
				if (first) {
					popup.value.open()
				} else {
					user.value = app.globalData.userinfo
				}
			}
		})
	}
	const close = () => {
		proxy.$emit('close')
	}
	const lotteryClose = () => {
		console.log('lotteryClose')
		// 刷新橡果数
		user.value = app.globalData.userinfo;
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.signtext {
		padding-top: 5px;
		font-family: Noto Sans S Chinese;
		font-size: 8px;
		font-weight: 400;
		line-height: 12px;
		color: #717171;
	}
	.mybalance text:first-child {
		font-family: Noto Sans S Chinese;
		font-size: 12px;
		font-weight: 400;
		line-height: 18px;
	}
	.mybalance text:last-child {
		font-family: Noto Sans S Chinese;
		font-size: 26px;
		font-weight: 700;
		line-height: 39px;
		margin-left: 5px;
	}
	.task-btn {
		border: 1px solid #70EB3D;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 700;
		padding: 5px 15px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.task-item-right {
		display: flex;
		align-items: center;
	}
	.task-item-center view:first-child {
		font-size: 14px;
		font-weight: bold;
	}
	.task-item-center view:last-child {
		font-size: 12px;
		color: #717171;
	}
	.task-item-center {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 2px 5px;
	}
	.task-item-left {
		display: flex;
		align-items: center;
		padding-left: 5px;
	}
	.task-item {
		display: flex;
		padding: 10px 0;
	}
	.task-content {
		display: flex;
		flex-direction: column;
	}
	.task-title {
		display: flex;
		font-weight: 700;
	}
	.sign-btn {
		display: flex;
		align-items: center;
		padding: 5px;
		justify-content: center;
	}
	.sign-btn-item text {
		background: linear-gradient(90deg, #BFFF90 0%, #26FFB3 100%);
		color: transparent;
		-webkit-background-clip: text;
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 700;
		line-height: 21px;
	}
	.sign-btn-item {
		background-color: #000;
		width: 200px;
		border-radius: 20px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.bck-black {
		background-color: #000 !important;
	}
	.bck-white {
		background-color: #FFF !important;
	}
	.signline {
		flex: 1;
		height: 3px;
		width: 100%;
		background-color: transparent;
	}
	.signcircle {
		height: 7px;
		width: 7px;
		border-radius: 3px;
		background-color: transparent;
	}
	.sign-item-bottom {
		flex-direction: column;
		width: 100%;
		padding-top: 2px;
	}
	.sign-check {
		border: 2px solid #70EB3D !important;
	}
	.sign-item-icon {
		padding: 4px 7px;
		flex-direction: column;
		border-radius: 6px;
		border: 2px solid transparent;
		box-sizing: border-box;
		background-color: #fff;
	}
	.sign-item-top {
		flex: 1;
		display: flex;
	}
	.sign-content {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		padding: 10px 0;
	}
	.sign-item {
		display: flex;
		flex-direction: column;
	}
	.sign-item view {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.sign-title {
		display: flex;
		flex-direction: column;
	}
	.sign-title text:first-child {
		font-family: Noto Sans S Chinese;
		font-size: 12px;
		font-weight: 700;
		line-height: 18px;
	}
	.sign-title text:last-child {
		font-family: Noto Sans S Chinese;
		font-size: 9px;
		font-weight: 400;
		line-height: 13.5px;
		color: #717171;
	}
	.bck-group {
		background: #F5F5F5CC;
		border-radius: 15px;
		padding: 10px;
	}
	.pd-15 {
		padding: 8px 15px;
	}
	.list {
		background: linear-gradient(#acf393, #11ffb7);
		height: calc(100% - 66px);
		position: absolute;
		z-index: 2;
	}
	.list .item {
		background: #F5F5F5CC;
		border-radius: 15px;
		display: flex;
		padding: 25px 15px;
		margin: 15px;
		flex-direction: column;
		
	}
	.tabbar {
		display: flex;
	}
	.top-left {
		flex: 1;
		background-color: #fff;
	}
	
	.top-right {
		flex: 1;
		background: linear-gradient(#c1fe8e, #acf393); /* 绿色 */
	}
	.top-left-item, .top-right-item {
		flex: 1;
		display: flex;
		padding: 0 15px;
		height: 78px;
	}
	.top-left-item {
		flex-direction: column;
		border-top-right-radius: 15px;
		background: linear-gradient(#c1fe8e, #acf393); /* 绿色 */
		font-family: Noto Sans S Chinese;
		font-size: 18px;
		font-weight: 700;
		line-height: 27px;
	}
	.top-right-item {
		background-color: #fff;
		justify-content: center;
		border-bottom-left-radius: 15px;
	}
	.top-right-item image {
		height: 150px;
		width: auto;
		position: absolute;
		z-index: 1;
		top: -55px;
	}
	.sign-hint {
		position: absolute;
		top: -60px;
		width: 325rpx;
		font-size: 14px;
		font-weight: bold;
	}
	.sign-hint view {
		width: 100px;
		display: flex;
		margin-left: -50px;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 16px;
		height: 48px;
	}
	.top-icon {
		display: flex;
		align-items: center;
		position: absolute;
		width: 100%;
		padding: 6px 0;
	}
	.top-icon image {
		height: 6px;
	}
	.icon-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
</style>